<template>
  <div id="login-container">
    <mm-nav-bar></mm-nav-bar>
    <div class="main-container">
      <h2 class="title">您好，请登录</h2>
      <!-- validate-first 是否在某一项校验不通过时停止校验 -->
      <van-form class="form"  ref="form" validate-first @submit="onSubmit" @failed="onFailed">
        <van-field
          v-model="mobileNum"
          name="mobileNum"
          placeholder="请输入手机号"
          :rules="[
            { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
              message: '请输入合法的手机号'
            }
          ]"
        >
        <!-- 自定义左侧图标（搜索框内） -->
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <van-field
          v-model="codeNum"
          name="codeNum"
          placeholder="请输入验证码"
          :rules="[
            { pattern: /^\d{4}$/,
              message: '请输入四位验证码'
            }
          ]"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
          <!-- 自定义输入框最右侧的额外内容 -->
          <template #extra>
            <span class="code-btn" @click="hGetCode">{{btnMes}}</span>
          </template>
        </van-field>
        <div class="agreement">
          登录即同意
          <span class="bright">《用户登录协议》</span>
          和
          <span class="bright">《隐私协议》</span>
        </div>
        <van-button class="submit-btn" round block native-type="submit">确定</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
// 引入顶部导航栏
import mmNavBar from '@/components/mmNavBar'
// 导入接口
import { getCode, login } from '@/api/myApi.js'
// 导入token工具函数
import { setToken } from '@/utils/token.js'
// 导入辅助函数
import { mapMutations } from 'vuex'

export default {
  name: 'login',
  components: {
    mmNavBar
  },
  data () {
    return {
      mobileNum: null, // 手机号
      codeNum: null, // 验证码
      btnMes: '获取验证码', // 获取验证码按钮文本
      countdown: 0 // 倒计时
    }
  },
  methods: {
    // mapMutations辅助函数的合并
    ...mapMutations(['CHANGEUSERINFO', 'CHANGEISLOGIN']),

    // 获取验证码
    // 1.用户点击
    hGetCode () {
      // 验证手机号
      this.$refs.form.validate('mobileNum')
        .then(res => {
          // 验证通过
          // 倒计时不结束不能再继续执行
          if (this.countdown !== 0) {
            return
          }
          // 设置倒计时
          this.countdown = 60
          // 获取手机号
          const data = {
            mobile: this.mobileNum
          }
          // loading效果 - 引入vant时自动挂载了Toast轻提示
          this.$toast.loading()
          // 发送请求
          this.doGetCode(data)
        }).catch(err => {
          console.log(err)
        })
    },
    // 2.执行获取验证码
    async doGetCode (data) {
      try {
        const res = await getCode(data)
        // console.log(res)
        // 定时器
        this.timer()
        // 成功提示
        this.$toast.success(res.data.data)
      } catch (err) {
        console.log(err)
        // 定时器
        this.timer()
        // 错误提示
        this.$toast.fail('获取验证码失败')
      }
    },
    // 3.定时器
    timer () {
      // 开始获取验证码的文本
      this.btnMes = `${this.countdown}S`
      const theTimer = setInterval(() => {
        this.countdown--
        // 获取验证码时的文本
        this.btnMes = `${this.countdown}S`
        // 倒计时为0清除定时器
        if (this.countdown === 0) {
          clearInterval(theTimer)
          // 获取验证码结束的文本
          this.btnMes = '获取验证码'
        }
      }, 150)
    },

    // 登录 - vant已经把表单的校验抽取出来了，输出两个不同的函数供我们使用
    // 1.验证成功-提交表单且验证通过后触发
    onSubmit () {
      const data = {
        mobile: this.mobileNum,
        code: this.codeNum
      }
      this.doLogin(data)
    },
    // 2.执行登陆
    async doLogin (data) {
      try {
        const res = await login(data)
        // console.log(res)
        // 接口设置的验证码判断
        if (res.data.code === 200) { // 验证码正确
          // 1.轻提示
          this.$toast.success(res.data.message)
          // 2.保存token
          // window.localStorage.setItem('token', `Bearer ${res.data.data.jwt}`)
          setToken(`Bearer ${res.data.data.jwt}`)
          // 3.保存数据到Vuex共享文件中
          // ***方法一：使用 this.$store.commit('更新用户信息的mutation'，提交的数据) 提交 mutation
          // this.$store.commit('changeUserInfo', res.data.data.user)
          // ***方法二：使用mapMutations辅助函数
          this.CHANGEUSERINFO(res.data.data.user)
          // 4.修改登录状态
          this.CHANGEISLOGIN(true)
          // 5.跳转到"我的"页面
          this.$router.replace('/my')
        } else { // 验证码不正确
          this.$toast.fail(res.data.message)
        }
      } catch (err) {
        console.log(err)
        this.$toast.fail('登陆失败')
      }
    },
    // 1.验证失败-提交表单且验证不通过后触发
    onFailed () {
      this.$toast.fail('验证失败')
    }
  }
}
</script>

<style lang='less'>
#login-container {
  background-color: @white-color;
  .main-container {
    padding: 0 15px;
    .title {
      margin: 0;
      padding-top: 50px;
      padding-bottom: 63px;
      font-size: 18px;
      font-weight: 600;
      color: @main-font-color;
    }
    .form {
      .iconfont {
        margin-right: 21px;
      }
      .van-field__control {
        font-size: 14px;
        color: @main-font-color;
      }
      .code-btn {
        font-size: 16px;
        color: @assist-color;
      }
      .agreement {
        margin-top: 28px;
        margin-bottom: 44px;
        font-size: 12px;
        .bright {
          color: @assist-color;
        }
      }
      .submit-btn {
        background-color: @main-color;
        font-size: 18px;
        font-weight: 600;
        color: @white-color;
      }
    }
  }
}
</style>
